<template>
    <div class="recommend">
     <h4>情比金坚</h4>
     <span></span>
     <div class="item">
         <div class="item-img" @click="detail(rec.id)" v-for="rec in recommend" :key="rec.id">
             <img v-lazy="rec.pic" alt="">
             <div class="name">{{rec.name}}</div>
             <div class="box">
                  <div class="Price">￥{{rec.minPrice}}</div>
                  <div class="sales">日销量{{rec.views}}笔</div>
             </div>
         </div>
     </div>
    </div>
</template>

<script>
export default {
  props: {
    recommend: {
      type: Array,
      required: true
    }
  },
  methods: {
    detail (id) {
      this.$emit('detail', id)
    }
  }
}
</script>

<style lang="scss" scoped>

.recommend{
    background-color: white;
}
.item>.item-img:nth-last-child(){
    img{
        height: 10rem;
    }
}
h4{ font-size: .6rem;
    margin: .4rem 0 .6rem 0;
    color: #666;
 text-align: center;
}
span{
    display: block;
    width: 3rem;
    height: .1rem;
    border-radius: .8rem;
    background-color: rgb(136,78,34);
    margin: auto;
    transform: translateY(-.5rem);
}
.item{
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item-img{
        color: #666;
        width: 46%;
         margin-bottom: .5rem;
        img{
           width:100%;
            height: 4.8rem;
        }
        .name{
            font-size: 0.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .Price{
                 font-size: 0.5rem;
                  color: #f43;
            }
            .sales{
                align-self: flex-end;
                font-size: 0.3rem;
            }
        }
    }
}
</style>
